<template>
  <div class="week-picker gap-2 w-full">
    <div
      v-for="item in weeks"
      :key="item.value"
      class="week flex justify-center items-center flex-wrap text-gray-500"
      :class="{ active: selectedKeys.has(item.value) }"
      @click="selectItem(item.value)"
    >
      {{ t[item.label] }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: any[];
}>();
const selectedKeys = ref<Set<string>>(new Set<string>());
const emit = defineEmits(["update:modelValue"]);
const t = translate("公共模块");
watch(
  props,
  () => {
    selectedKeys.value.clear();
    if (props.modelValue && typeof props.modelValue === "object") {
      props.modelValue.forEach((item: string) => {
        selectedKeys.value.add(item);
      });
    }
  },
  {
    deep: true,
    immediate: true
  }
);
const selectItem = (week: string) => {
  if (selectedKeys.value.has(week)) {
    selectedKeys.value.delete(week);
  } else {
    selectedKeys.value.add(week);
  }
  emit("update:modelValue", Array.from(selectedKeys.value));
};
const weeks = [
  {
    label: "一",
    value: "2"
  },
  {
    label: "二",
    value: "3"
  },
  {
    label: "三",
    value: "4"
  },
  {
    label: "四",
    value: "5"
  },
  {
    label: "五",
    value: "6"
  },
  {
    label: "六",
    value: "7"
  },
  {
    label: "日",
    value: "1"
  }
];
</script>

<style lang="scss" scoped>
.week-picker {
  display: flex;
  width: 100%;
  .week {
    width: fit-content;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
  }
  .active {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
  }
}
</style>
